<template>
  <view class="container">
	  
    <view class="header">
      <text class="cancel">取消</text>
      <text class="confirm">确认</text>
    </view>

    <view class="avatars">
      <view class="avatar-item" v-for="(avatar, index) in avatars" :key="index">
        <image class="avatar" :src="avatar.src"></image>
        <view class="checkmark" v-if="avatar.selected">&#x2713;</view>
      </view>
      <view class="avatar-item upload">
        <text class="upload-icon">+</text>
        <text class="upload-text">上传照片</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatars: [
        { src: 'https://kkimgs.yisou.com/ims?kt=url&at=ori&key=aHR0cHM6Ly9jLXNzbC5kdWl0YW5nLmNvbS91cGxvYWRzL2Jsb2cvMjAyNDA1LzAxL0F2U29wMFBwVXcwUGQ5QS5qcGVn&sign=yx:Mfn-mCzuCJZcE2CAjiYI-juelN0=&tv=0_0', selected: false },
        { src: 'https://kkimgs.yisou.com/ims?kt=url&at=ori&key=aHR0cHM6Ly9jLXNzbC5kdHN0YXRpYy5jb20vdXBsb2Fkcy9pdGVtLzIwMjAwNS8xNi8yMDIwMDUxNjA4MjIyOV9xYnV1di50aHVtYi4xMDAwXzAuanBn&sign=yx:CfXOSDb7W7x7Yf0m6UX_gOTcCLo=&tv=0_0', selected: false },
        { src: 'https://kkimgs.yisou.com/ims?kt=url&at=ori&key=aHR0cHM6Ly9jLXNzbC5kdHN0YXRpYy5jb20vdXBsb2Fkcy9pdGVtLzIwMTkxMi8yMi8yMDE5MTIyMjE0MDAyNF9oZ3BoZy50aHVtYi4xMDAwXzAuanBn&sign=yx:jxmHFEOw-nqigBjP73craSp0vq8=&tv=0_0', selected: false },
		{ src: 'https://kkimgs.yisou.com/ims?kt=url&at=ori&key=aHR0cHM6Ly9jLXNzbC5kdHN0YXRpYy5jb20vdXBsb2Fkcy9pdGVtLzIwMTkxMi8yMi8yMDE5MTIyMjE0MDAyNF9oZ3BoZy50aHVtYi4xMDAwXzAuanBn&sign=yx:jxmHFEOw-nqigBjP73craSp0vq8=&tv=0_0', selected: false },
        { src: 'https://kkimgs.yisou.com/ims?kt=url&at=ori&key=aHR0cHM6Ly9jLXNzbC5kdHN0YXRpYy5jb20vdXBsb2Fkcy9pdGVtLzIwMTkwMi8yNC8yMDE5MDIyNDE2NTkxMV9wbnl3ZS50aHVtYi4xMDAwXzAuanBn&sign=yx:iELm5Jx0_qtOHfZMgdgjlS43fqc=&tv=0_0', selected: true } // 默认选中
      ]
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #F7F7F7;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
  padding: 20rpx;
}

.title {
  color: white;
  font-size: 36rpx;
}

.avatars {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
  background-color: #FFFFFF;
  padding: 20rpx;
  border-radius: 10rpx;
  text-align: center;
}

.avatar-item {
  width: 160rpx;
  height: 160rpx;
  margin: 10rpx;
  position: relative;
  margin-left: 40rpx;
  /* background-color: red; */
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.checkmark {
  position: absolute;
  top: 5rpx;
  left: 5rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  padding: 5rpx;
  font-size: 20rpx;
}

.upload {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1rpx dashed #ccc;
}

.upload-icon {
  font-size: 40rpx;
  color: #007AFF;
}

.upload-text {
  font-size: 24rpx;
  color: #666;
}
.cancel{
  color: black;
  font-size: 30rpx;
}
.confirm{
  color: #007AFF;
  font-size: 30rpx;
}

</style>
